<!DOCTYPE html><html lang="zh-CN" data-theme="dark"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>jQuery解析 | 北城韩雨</title><meta name="keywords" content="JavaScript"><meta name="author" content="北城韩雨"><meta name="copyright" content="北城韩雨"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#0d0d0d"><meta name="description" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="jQuery解析">
<meta property="og:url" content="http://example.com/2019/03/31/jQuery%E8%A7%A3%E6%9E%90/index.html">
<meta property="og:site_name" content="北城韩雨">
<meta property="og:description" content="JavaScript">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530644&t=10679b5732c52e39eeb588040240a790">
<meta property="article:published_time" content="2019-03-30T16:00:00.000Z">
<meta property="article:modified_time" content="2019-06-02T16:00:00.000Z">
<meta property="article:author" content="北城韩雨">
<meta property="article:tag" content="jQuery">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530644&t=10679b5732c52e39eeb588040240a790"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="http://example.com/2019/03/31/jQuery%E8%A7%A3%E6%9E%90/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'mediumZoom',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'jQuery解析',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2019-06-03 00:00:00'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><link rel="stylesheet" href="/css/custom.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/coin.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="/css/liuxing.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css"  media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zhheo/JS-Heo@main/bb/showbb_in_index.css"><!-- hexo injector head_end start --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" media="print" onload="this.media='screen'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css" media="defer" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-butterfly-tag-plugins-plus/lib/tag_plugins.min.css" media="defer" onload="this.media='all'"><!-- hexo injector head_end end --><meta name="generator" content="Hexo 5.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/img/my.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">北城韩雨</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/"><i class="fa-fw fas fa-home faa-tada"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/shuoshuo/"><i class="fa-fw fas fa-archive faa-tada"></i><span> 叨逼叨</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/tags/"><i class="fa-fw fas fa-tags faa-tada"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/categories/"><i class="fa-fw fas fa-folder-open faa-tada"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/link/"><i class="fa-fw fas fa-link faa-tada"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/comments/"><svg class="icon faa-tada" aria-hidden="true"><use xlink:href="#icon-message"></use></svg><span> 留言板</span></a></div><div class="menus_item"><a class="site-page faa-parent animated-hover" href="/about/"><i class="fa-fw fas fa-heart faa-tada"></i><span> 个人简介</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">jQuery解析</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2019-03-30T16:00:00.000Z" title="发表于 2019-03-31 00:00:00">2019-03-31</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2019-06-02T16:00:00.000Z" title="更新于 2019-06-03 00:00:00">2019-06-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/JavaScript/">JavaScript</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.8k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>12分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="jQuery解析"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="jQuery-解析"><a href="#jQuery-解析" class="headerlink" title="jQuery 解析"></a>jQuery 解析</h1><h2 id="jQuery-常用方法"><a href="#jQuery-常用方法" class="headerlink" title="jQuery 常用方法"></a>jQuery 常用方法</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 函数传单技巧 比如我有一个函数 规定可以传一个参数 或者 两个参数  传两个参数的时候 必须是数字、函数 传第一个参数的时候必须是函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> x = <span class="number">0</span></span><br><span class="line">        y = <span class="built_in">arguments</span>[<span class="number">0</span>]</span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">typeof</span> y === <span class="string">&#x27;number&#x27;</span>)&#123;</span><br><span class="line">        x = y</span><br><span class="line">        y = <span class="built_in">arguments</span>[<span class="number">1</span>]</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">fn(<span class="number">0</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;)</span><br><span class="line">fn(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//each 方法  jquery 在掉each的时候 其实也是调取的原型上的方法 </span></span><br><span class="line"><span class="comment">//extend 就是在原型上 增加方法 each 可以遍历数组/伪数组/对象</span></span><br><span class="line">$.each([<span class="number">10</span>,<span class="number">20</span>,<span class="number">30</span>],<span class="function"><span class="keyword">function</span>(<span class="params">i,item</span>)</span>&#123;</span><br><span class="line">    <span class="comment">//这里就相当于控制循环结束了</span></span><br><span class="line">    <span class="keyword">if</span>(i &lt; <span class="number">2</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br><span class="line">jQuery.extend(&#123;</span><br><span class="line">    each:<span class="function"><span class="keyword">function</span>(<span class="params">obj,callback</span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> lengt,i = <span class="number">0</span></span><br><span class="line">        <span class="comment">//判断你是数组还是对象</span></span><br><span class="line">        <span class="keyword">if</span>(aiArrayLike(obj))&#123;</span><br><span class="line">            length = obj.length</span><br><span class="line">            <span class="keyword">for</span>(;i &lt; length ; i++)&#123;</span><br><span class="line">                <span class="keyword">var</span> item = obj[i]</span><br><span class="line">                <span class="comment">//这里保证我们的函数种的this 是我们数组的每一项 </span></span><br><span class="line">                <span class="keyword">var</span> res = callback.call(item,i,item)</span><br><span class="line">                <span class="comment">//可以控制循环结束</span></span><br><span class="line">                <span class="keyword">if</span>(res === <span class="literal">false</span>)&#123;</span><br><span class="line">                    <span class="keyword">break</span></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            <span class="keyword">for</span>(i <span class="keyword">in</span> obj)&#123;</span><br><span class="line">                <span class="keyword">if</span>(callback.call(obj[i],i,obj[i]) === <span class="literal">false</span>)&#123;</span><br><span class="line">                    <span class="keyword">break</span></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> obj</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="JQ种的数据类型检测"><a href="#JQ种的数据类型检测" class="headerlink" title="JQ种的数据类型检测"></a>JQ种的数据类型检测</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> class2type = &#123;&#125;</span><br><span class="line"><span class="keyword">var</span> toString = class2type.toString <span class="comment">//调取的是Object.prototype.toString 用来数据类型检测</span></span><br><span class="line"><span class="keyword">var</span> hasOwn = class2type.hasOwnProperty <span class="comment">//调取的是Object.prototype.hasOwnProperty 判断是不是私有属性</span></span><br><span class="line"><span class="keyword">var</span> fnToString = hasOwn.toString <span class="comment">// 调取的是 Function.prototype.toString 用来转换字符串</span></span><br><span class="line"><span class="keyword">var</span> ObjectFunctionString = fnToString.call(<span class="built_in">Object</span>) <span class="comment">//可以是对象转换成字符串 </span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 然后建立数据类型的映射表</span></span><br><span class="line">$.each([<span class="string">&#x27;Boolean&#x27;</span>,<span class="string">&#x27;Number&#x27;</span>,<span class="string">&#x27;String&#x27;</span>,<span class="string">&#x27;Function&#x27;</span>,<span class="string">&#x27;Array&#x27;</span>,<span class="string">&#x27;Date&#x27;</span>,<span class="string">&#x27;RegExp&#x27;</span>,<span class="string">&#x27;Object&#x27;</span>,<span class="string">&#x27;Error&#x27;</span>,<span class="string">&#x27;Symbol&#x27;</span>],<span class="function"><span class="keyword">function</span>(<span class="params">i,name</span>) </span>&#123;</span><br><span class="line">    class2type[<span class="string">`[object <span class="subst">$&#123;name&#125;</span>]`</span>] = name.toLowerCase()</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">//循环之后 class2type 上面就增加了很多属性 </span></span><br><span class="line">&#123;</span><br><span class="line">    <span class="string">&#x27;[object Boolean]&#x27;</span> : <span class="string">&#x27;boolean&#x27;</span></span><br><span class="line">    <span class="comment">//类似上面那样</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 数据类型检测的公共方法</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">toType</span>(<span class="params">obj</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">if</span>(obj == <span class="literal">null</span>)&#123;</span><br><span class="line">        <span class="keyword">return</span> obj + <span class="string">&#x27;&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//这里就是看看 你传进来的obj 是哪个 如果是obj 就去我们上面的映射表里去找到对应的值 如果不是就基于基本数据类型检测</span></span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">typeof</span> obj === <span class="string">&#x27;object&#x27;</span> || <span class="keyword">typeof</span> obj === <span class="string">&#x27;function&#x27;</span>?</span><br><span class="line">        class2type[toString.call(obj)] || <span class="string">&#x27;object&#x27;</span> : <span class="keyword">typeof</span> obj</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="检测是否为数组或者类数组"><a href="#检测是否为数组或者类数组" class="headerlink" title="检测是否为数组或者类数组"></a>检测是否为数组或者类数组</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 检测是否为数组或者类数组</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isArrayLike</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// length:对象的length属性值或者是false</span></span><br><span class="line">    <span class="comment">// type:获取检测值的数据类型</span></span><br><span class="line">    <span class="keyword">var</span> length = !!obj &amp;&amp; <span class="string">&quot;length&quot;</span> <span class="keyword">in</span> obj &amp;&amp; obj.length,</span><br><span class="line">        type = toType(obj);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 函数和window一定不是数据或者类数组（但是他们确实有length属性）</span></span><br><span class="line">    <span class="keyword">if</span> (isFunction(obj) || isWindow(obj)) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// type === &quot;array&quot;：数组</span></span><br><span class="line">    <span class="comment">// length === 0：我们认为其是一空的类数组集合</span></span><br><span class="line">    <span class="comment">// (length - 1) in obj：对于非空集合，我们认为只要最大索引在对象中，则证明索引是逐级递增的（不准确）</span></span><br><span class="line">    <span class="keyword">return</span> type === <span class="string">&quot;array&quot;</span> || length === <span class="number">0</span> ||</span><br><span class="line">        <span class="keyword">typeof</span> length === <span class="string">&quot;number&quot;</span> &amp;&amp; length &gt; <span class="number">0</span> &amp;&amp; (length - <span class="number">1</span>) <span class="keyword">in</span> obj;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="检测是否为空对象"><a href="#检测是否为空对象" class="headerlink" title="检测是否为空对象"></a>检测是否为空对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 验证是否为空对象：主要是看当前对象中是否存在私有属性</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isEmptyObject</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> name;</span><br><span class="line">    <span class="keyword">for</span> (name <span class="keyword">in</span> obj) &#123;</span><br><span class="line">        <span class="keyword">if</span> (!obj.hasOwnProperty(name)) <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="检测是否为纯粹的对象"><a href="#检测是否为纯粹的对象" class="headerlink" title="检测是否为纯粹的对象"></a>检测是否为纯粹的对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">isPlainObject</span>(<span class="params">obj</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> proto, Ctor;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 基于toString.call返回结果不是[object Object]则一定不是纯粹的对象</span></span><br><span class="line">    <span class="keyword">if</span> (!obj || toString.call(obj) !== <span class="string">&quot;[object Object]&quot;</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// 获取当前对象所属类的原型 let obj = &#123;&#125; obj.__proto__ === Object.prototype</span></span><br><span class="line">    proto = getProto(obj);</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Object.create(null)：创建一个空对象，但是没有__proto__</span></span><br><span class="line">    <span class="keyword">if</span> (!proto) <span class="keyword">return</span> <span class="literal">true</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// Ctor：获取当前对象所属类的constructor</span></span><br><span class="line">    <span class="comment">// 纯粹对象的特点：直属类的原型一定是Object.prototype（DOM元素对象/自定义的实例对象...都不是）</span></span><br><span class="line">    Ctor = hasOwn.call(proto, <span class="string">&quot;constructor&quot;</span>) &amp;&amp; proto.constructor;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">typeof</span> Ctor === <span class="string">&quot;function&quot;</span> &amp;&amp; fnToString.call(Ctor) === ObjectFunctionString;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="jquery核心"><a href="#jquery核心" class="headerlink" title="jquery核心"></a>jquery核心</h2><h3 id="挂载到window的过程"><a href="#挂载到window的过程" class="headerlink" title="挂载到window的过程"></a>挂载到window的过程</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 入口是一个自调用函数 传送了两个参数   用来判断 你当前jq执行的环境</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"><span class="built_in">global</span>, factory</span>) </span>&#123;</span><br><span class="line"><span class="meta">	&quot;use strict&quot;</span>;</span><br><span class="line">    <span class="comment">//第一个参数global 用来判断 你是浏览器执行</span></span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">module</span> === <span class="string">&quot;object&quot;</span> &amp;&amp; <span class="keyword">typeof</span> <span class="built_in">module</span>.exports === <span class="string">&quot;object&quot;</span>) &#123;</span><br><span class="line">        <span class="comment">//如果你是node执行的 那么global就传进来的就是this(node 下的global 一个空对象)</span></span><br><span class="line">		<span class="built_in">module</span>.exports = <span class="built_in">global</span>.document ? factory(<span class="built_in">global</span>, <span class="literal">true</span>) :</span><br><span class="line">			<span class="function"><span class="keyword">function</span> (<span class="params">w</span>) </span>&#123;</span><br><span class="line">				<span class="keyword">if</span> (!w.document) &#123;</span><br><span class="line">					<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&quot;jQuery requires a window with a document&quot;</span>);</span><br><span class="line">				&#125;</span><br><span class="line">                  <span class="comment">//最有导出了一个函数 我们用require 去导入然后接收这个函数</span></span><br><span class="line">				<span class="keyword">return</span> factory(w);</span><br><span class="line">			&#125;;</span><br><span class="line">	&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">//如果是浏览器 那么这个global 就是window </span></span><br><span class="line">		factory(<span class="built_in">global</span>);</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// Pass this if window is not defined yet</span></span><br><span class="line">&#125;)(<span class="keyword">typeof</span> <span class="built_in">window</span> !== <span class="string">&quot;undefined&quot;</span> ? <span class="built_in">window</span> : <span class="built_in">this</span>, <span class="function"><span class="keyword">function</span> (<span class="params"><span class="built_in">window</span>, noGlobal</span>) </span>&#123;</span><br><span class="line">    ........好多代码.......</span><br><span class="line">    <span class="comment">//这里做了$符号转让 比如我们引入了两个类库 一个zepot 他的 符号也是$ 第二个是jquery 符号也是$ 那么第二个引入的jq类库 会把 第一个 引入的zepot 类库的$覆盖掉 所以我们就要执行这个方法 把符号传让出去</span></span><br><span class="line">    <span class="keyword">var</span> _jQuery = <span class="built_in">window</span>.jQuery,</span><br><span class="line">		_$ = <span class="built_in">window</span>.$;</span><br><span class="line">	jQuery.noConflict = <span class="function"><span class="keyword">function</span> (<span class="params">deep</span>) </span>&#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="built_in">window</span>.$ === jQuery) &#123;</span><br><span class="line">			<span class="built_in">window</span>.$ = _$;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> (deep &amp;&amp; <span class="built_in">window</span>.jQuery === jQuery) &#123;</span><br><span class="line">			<span class="built_in">window</span>.jQuery = _jQuery;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> jQuery;</span><br><span class="line">	&#125;;</span><br><span class="line">    <span class="comment">//最后一步 判断我们的第二个参数   就可以把我们上面写的代码 都挂载到window上了</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> noGlobal === <span class="string">&quot;undefined&quot;</span>) &#123;</span><br><span class="line">		<span class="built_in">window</span>.jQuery = <span class="built_in">window</span>.$ = jQuery;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 如下</span></span><br><span class="line">&lt;script src=<span class="string">&quot;zepot.js&quot;</span> &gt; &lt;/script&gt;   有$</span><br><span class="line">&lt;script src=<span class="string">&quot;jquery.js&quot;</span>&gt; &lt;/script&gt;   有$</span><br><span class="line"><span class="comment">//那么此时 第二个$ 肯定会把第一个$ 覆盖掉</span></span><br><span class="line"><span class="comment">//所以我们运行 </span></span><br><span class="line">jQuery.noConflict()</span><br><span class="line"><span class="comment">//代码从上向下走  此时已经走完了 但是在走的过程中 我们发现$已经被zepot调用了  所以window.$就是zepot _$也是zepot</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> _jQuery = <span class="built_in">window</span>.jQuery,</span><br><span class="line">    <span class="comment">//把zepot的$ 保存到 _$ 上</span></span><br><span class="line">		_$ = <span class="built_in">window</span>.$;</span><br><span class="line">	jQuery.noConflict = <span class="function"><span class="keyword">function</span> (<span class="params">deep</span>) </span>&#123;</span><br><span class="line">        <span class="comment">//   已经加载完毕了 此时jquery的$已经挂载到window上了</span></span><br><span class="line">		<span class="keyword">if</span> (<span class="built_in">window</span>.$ === jQuery) &#123;</span><br><span class="line">            <span class="comment">//那么此时 我们就让window.$ = _$(zepot)</span></span><br><span class="line">			<span class="built_in">window</span>.$ = _$;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> (deep &amp;&amp; <span class="built_in">window</span>.jQuery === jQuery) &#123;</span><br><span class="line">			<span class="built_in">window</span>.jQuery = _jQuery;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> jQuery;</span><br><span class="line">	&#125;;</span><br><span class="line">    <span class="comment">//最后一步 判断我们的第二个参数   就可以把我们上面写的代码 都挂载到window上了</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> noGlobal === <span class="string">&quot;undefined&quot;</span>) &#123;</span><br><span class="line">		<span class="built_in">window</span>.jQuery = <span class="built_in">window</span>.$ = jQuery;</span><br><span class="line">	&#125;</span><br></pre></td></tr></table></figure>
<h3 id="原型"><a href="#原型" class="headerlink" title="原型"></a>原型</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 入口是一个自调用函数 传送了两个参数   用来判断 你当前jq执行的环境</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"><span class="built_in">global</span>, factory</span>) </span>&#123;</span><br><span class="line"><span class="meta">	&quot;use strict&quot;</span>;</span><br><span class="line">    <span class="comment">//第一个参数global 用来判断 你是浏览器执行</span></span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">module</span> === <span class="string">&quot;object&quot;</span> &amp;&amp; <span class="keyword">typeof</span> <span class="built_in">module</span>.exports === <span class="string">&quot;object&quot;</span>) &#123;</span><br><span class="line">        <span class="comment">//如果你是node执行的 那么global就传进来的就是this(node 下的global 一个空对象)</span></span><br><span class="line">		<span class="built_in">module</span>.exports = <span class="built_in">global</span>.document ? factory(<span class="built_in">global</span>, <span class="literal">true</span>) :</span><br><span class="line">			<span class="function"><span class="keyword">function</span> (<span class="params">w</span>) </span>&#123;</span><br><span class="line">				<span class="keyword">if</span> (!w.document) &#123;</span><br><span class="line">					<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&quot;jQuery requires a window with a document&quot;</span>);</span><br><span class="line">				&#125;</span><br><span class="line">                  <span class="comment">//最有导出了一个函数 我们用require 去导入然后接收这个函数</span></span><br><span class="line">				<span class="keyword">return</span> factory(w);</span><br><span class="line">			&#125;;</span><br><span class="line">	&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">//如果是浏览器 那么这个global 就是window </span></span><br><span class="line">		factory(<span class="built_in">global</span>);</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">	<span class="comment">// Pass this if window is not defined yet</span></span><br><span class="line">&#125;)(<span class="keyword">typeof</span> <span class="built_in">window</span> !== <span class="string">&quot;undefined&quot;</span> ? <span class="built_in">window</span> : <span class="built_in">this</span>, <span class="function"><span class="keyword">function</span> (<span class="params"><span class="built_in">window</span>, noGlobal</span>) </span>&#123;</span><br><span class="line">   <span class="comment">//最开始的代码</span></span><br><span class="line">    <span class="keyword">var</span> version = <span class="string">&quot;3.5.1&quot;</span>,</span><br><span class="line">        jQuery = <span class="function"><span class="keyword">function</span> (<span class="params">selector, context</span>)</span>&#123;</span><br><span class="line">            <span class="comment">//当我们执行$的时候 就相当于创造了一个jquery的实例 只不过这个构造函数是 jQuery的上的init 方法  相当于把jQuery当成对象 执行了 他fn 上面的init 方法</span></span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">new</span> jQuery.fn.init(selector, context)</span><br><span class="line">        &#125;</span><br><span class="line">    <span class="comment">// </span></span><br><span class="line">    jQuery.fn = jQuery.prototype = &#123;</span><br><span class="line">        <span class="title">constructor</span>:<span class="title">jQuery</span>,</span><br><span class="line">        <span class="title">jquery</span>:<span class="title">version</span>,</span><br><span class="line">        <span class="title">length</span>:0</span><br><span class="line">        .......好多代码</span><br><span class="line">    &#125;</span><br><span class="line">    //<span class="title">$</span>(<span class="params"></span>)执行是创造了<span class="title">init</span>的这类的一个实例 实例.<span class="title">__proto__</span> === <span class="title">init</span>.<span class="title">prototype</span> === <span class="title">jQuery</span>.<span class="title">prototype</span> 所以也可以说<span class="title">$</span>(<span class="params"></span>)创造出来的是<span class="title">jQuery</span>类的一个实例 =&gt; 把<span class="title">jQuery</span>当作普通函数执行 也可以创造它的一个实例 这种模式叫做工厂模式  //主要是 在写的时候 不要在<span class="title">new</span> 了 直接能当方法使用   </span><br><span class="line">    <span class="title">var</span> <span class="title">init</span> = <span class="title">jQuery</span>.<span class="title">fn</span>.<span class="title">init</span> = <span class="title">function</span> (<span class="params">selector, context</span>) &#123; ...好多代码 &#125;</span><br><span class="line">    init.prototype = jQuery.fn</span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">    <span class="comment">//这里做了$符号转让 比如我们引入了两个类库 一个zepot 他的 符号也是$ 第二个是jquery 符号也是$ 那么第二个引入的jq类库 会把 第一个 引入的zepot 类库的$覆盖掉 所以我们就要执行这个方法 把符号传让出去</span></span><br><span class="line">    <span class="keyword">var</span> _jQuery = <span class="built_in">window</span>.jQuery,</span><br><span class="line">		_$ = <span class="built_in">window</span>.$;</span><br><span class="line">	jQuery.noConflict = <span class="function"><span class="keyword">function</span> (<span class="params">deep</span>) </span>&#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="built_in">window</span>.$ === jQuery) &#123;</span><br><span class="line">			<span class="built_in">window</span>.$ = _$;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> (deep &amp;&amp; <span class="built_in">window</span>.jQuery === jQuery) &#123;</span><br><span class="line">			<span class="built_in">window</span>.jQuery = _jQuery;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> jQuery;</span><br><span class="line">	&#125;;</span><br><span class="line">    <span class="comment">//最后一步 判断我们的第二个参数   就可以把我们上面写的代码 都挂载到window上了</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> noGlobal === <span class="string">&quot;undefined&quot;</span>) &#123;</span><br><span class="line">		<span class="built_in">window</span>.jQuery = <span class="built_in">window</span>.$ = jQuery;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 入口是一个自调用函数 传送了两个参数   用来判断 你当前jq执行的环境</span></span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"><span class="built_in">global</span>, factory</span>) </span>&#123;</span><br><span class="line"><span class="meta">	&quot;use strict&quot;</span>;</span><br><span class="line">	<span class="keyword">if</span> (<span class="keyword">typeof</span> <span class="built_in">module</span> === <span class="string">&quot;object&quot;</span> &amp;&amp; <span class="keyword">typeof</span> <span class="built_in">module</span>.exports === <span class="string">&quot;object&quot;</span>) &#123;</span><br><span class="line">		<span class="built_in">module</span>.exports = <span class="built_in">global</span>.document ? factory(<span class="built_in">global</span>, <span class="literal">true</span>) :</span><br><span class="line">			<span class="function"><span class="keyword">function</span> (<span class="params">w</span>) </span>&#123;</span><br><span class="line">				<span class="keyword">if</span> (!w.document) &#123;</span><br><span class="line">					<span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">&quot;jQuery requires a window with a document&quot;</span>);</span><br><span class="line">				&#125;</span><br><span class="line">				<span class="keyword">return</span> factory(w);</span><br><span class="line">			&#125;;</span><br><span class="line">	&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">		factory(<span class="built_in">global</span>);</span><br><span class="line">	&#125;</span><br><span class="line"></span><br><span class="line">&#125;)(<span class="keyword">typeof</span> <span class="built_in">window</span> !== <span class="string">&quot;undefined&quot;</span> ? <span class="built_in">window</span> : <span class="built_in">this</span>, <span class="function"><span class="keyword">function</span> (<span class="params"><span class="built_in">window</span>, noGlobal</span>) </span>&#123;</span><br><span class="line">   <span class="comment">//最开始的代码</span></span><br><span class="line">    <span class="keyword">var</span> version = <span class="string">&quot;3.5.1&quot;</span>,</span><br><span class="line">        jQuery = <span class="function"><span class="keyword">function</span> (<span class="params">selector, context</span>)</span>&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">new</span> jQuery.fn.init(selector, context)</span><br><span class="line">        &#125;</span><br><span class="line">    jQuery.fn = jQuery.prototype = &#123;</span><br><span class="line">        <span class="title">constructor</span>:<span class="title">jQuery</span>,</span><br><span class="line">        <span class="title">jquery</span>:<span class="title">version</span>,</span><br><span class="line">        <span class="title">length</span>:0</span><br><span class="line">         <span class="title">get</span>: <span class="title">function</span> (<span class="params">num</span>) &#123;</span><br><span class="line">            <span class="comment">// 把JQ类数组集合变为数组集合(Array的实例)</span></span><br><span class="line">            <span class="keyword">if</span> (num == <span class="literal">null</span>) &#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">this</span>);</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="comment">// 支持负数索引 这里的负数理解为倒数 获取倒数第一个 或者第二个</span></span><br><span class="line">            <span class="keyword">return</span> num &lt; <span class="number">0</span> ? <span class="built_in">this</span>[num + <span class="built_in">this</span>.length] : <span class="built_in">this</span>[num];</span><br><span class="line">        &#125;,</span><br><span class="line">        eq: <span class="function"><span class="keyword">function</span> (<span class="params">i</span>) </span>&#123;</span><br><span class="line">            <span class="keyword">var</span> len = <span class="built_in">this</span>.length,</span><br><span class="line">                j = +i + (i &lt; <span class="number">0</span> ? len : <span class="number">0</span>);</span><br><span class="line">            <span class="keyword">return</span> <span class="built_in">this</span>.pushStack(j &gt;= <span class="number">0</span> &amp;&amp; j &lt; len ? [<span class="built_in">this</span>[j]] : []);</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">// 传递一个数组，我们把其变为JQ实例</span></span><br><span class="line">        pushStack: <span class="function"><span class="keyword">function</span> (<span class="params">elems</span>) </span>&#123;</span><br><span class="line">            <span class="comment">// this.constructor()：jQuery()，空集合(JQ实例)</span></span><br><span class="line">            <span class="comment">// 合并后的结果，既是一个JQ实例(集合)，也包含你传递进来的这些项的信息</span></span><br><span class="line">            <span class="keyword">var</span> ret = jQuery.merge(<span class="built_in">this</span>.constructor(), elems);</span><br><span class="line">            ret.prevObject = <span class="built_in">this</span>;</span><br><span class="line">            <span class="keyword">return</span> ret;</span><br><span class="line">        &#125;,</span><br><span class="line">        each: <span class="function"><span class="keyword">function</span> (<span class="params">callback</span>) </span>&#123;</span><br><span class="line">            <span class="comment">// 调用原型上的each方法：核心本质也是调用工具类的each方法</span></span><br><span class="line">            <span class="keyword">return</span> jQuery.each(<span class="built_in">this</span>, callback);</span><br><span class="line">        &#125;,</span><br><span class="line">        sort: [].sort</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> rootjQuery = jQuery(<span class="built_in">document</span>);</span><br><span class="line">    <span class="keyword">var</span> init = jQuery.fn.init = <span class="function"><span class="keyword">function</span> (<span class="params">selector, context</span>) </span>&#123; </span><br><span class="line">    	 <span class="keyword">var</span> match, elem;</span><br><span class="line">        <span class="comment">// &quot;&quot;/null/undefined/false 如果你传的是这样写 那么就返回 jquery.fn.init这个函数(this)</span></span><br><span class="line">        <span class="keyword">if</span> (!selector) <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line">        <span class="comment">//看看 你有没有传根 如果没传根就是我们的文档</span></span><br><span class="line">        root = root || rootjQuery;</span><br><span class="line">		<span class="comment">//然后支持三种类型 第一个种是传个字符串 $(&quot;.box&quot;)</span></span><br><span class="line">        <span class="comment">// 第二种 是传一个DOM对象 $(body)</span></span><br><span class="line">        <span class="comment">// 第三种 就是传一个函数 $(function() &#123;&#125; )</span></span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">typeof</span> selector === <span class="string">&quot;string&quot;</span>) &#123;</span><br><span class="line">            <span class="comment">// 字符串</span></span><br><span class="line">            <span class="comment">//   + HTML结构字符串  创建一个DOM元素</span></span><br><span class="line">            <span class="comment">//   + 选择器字符串  获取页面中符合条件的元素</span></span><br><span class="line">            <span class="comment">/* if (selector[0] === &quot;&lt;&quot; &amp;&amp;</span></span><br><span class="line"><span class="comment">                selector[selector.length - 1] === &quot;&gt;&quot; &amp;&amp;</span></span><br><span class="line"><span class="comment">                selector.length &gt;= 3) &#123;&#125; else &#123;&#125; */</span></span><br><span class="line">            <span class="comment">//...</span></span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (selector.nodeType) &#123;</span><br><span class="line">            <span class="comment">// 原生DOM元素对象(JS内置方法获取的)：把DOM对象变为了一个类数组集合</span></span><br><span class="line">            <span class="built_in">this</span>[<span class="number">0</span>] = selector;</span><br><span class="line">            <span class="built_in">this</span>.length = <span class="number">1</span>;</span><br><span class="line">            <span class="keyword">return</span> <span class="built_in">this</span>;</span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> (isFunction(selector)) &#123;</span><br><span class="line">            <span class="comment">// 函数 $(function()&#123;&#125;) &lt;==&gt; $(document).ready(function()&#123;&#125;)</span></span><br><span class="line">            <span class="comment">// 等待页面中DOM结构加载完成(DOMContentLoaded)触发回调函数函数执行，触发点优先于window.onload(DOM结构及页面中所有资源都加载完才会触发执行)</span></span><br><span class="line">            <span class="keyword">return</span> root.ready !== <span class="literal">undefined</span> ?</span><br><span class="line">                root.ready(selector) :</span><br><span class="line">                selector(jQuery);</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// 创造一个类数组集合</span></span><br><span class="line">        <span class="keyword">return</span> jQuery.makeArray(selector, <span class="built_in">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    init.prototype = jQuery.fn</span><br><span class="line">    <span class="keyword">var</span> _jQuery = <span class="built_in">window</span>.jQuery,</span><br><span class="line">		_$ = <span class="built_in">window</span>.$;</span><br><span class="line">	jQuery.noConflict = <span class="function"><span class="keyword">function</span> (<span class="params">deep</span>) </span>&#123;</span><br><span class="line">		<span class="keyword">if</span> (<span class="built_in">window</span>.$ === jQuery) &#123;</span><br><span class="line">			<span class="built_in">window</span>.$ = _$;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">if</span> (deep &amp;&amp; <span class="built_in">window</span>.jQuery === jQuery) &#123;</span><br><span class="line">			<span class="built_in">window</span>.jQuery = _jQuery;</span><br><span class="line">		&#125;</span><br><span class="line">		<span class="keyword">return</span> jQuery;</span><br><span class="line">	&#125;;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> noGlobal === <span class="string">&quot;undefined&quot;</span>) &#123;</span><br><span class="line">		<span class="built_in">window</span>.jQuery = <span class="built_in">window</span>.$ = jQuery;</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</article><div class="post-copyright"><div class="post-copyright__title"><span class="post-copyright-info"><h>jQuery解析</h></span></div><div class="post-copyright__type"><span class="post-copyright-info"><a href="http://example.com/2019/03/31/jQuery%E8%A7%A3%E6%9E%90/">http://example.com/2019/03/31/jQuery%E8%A7%A3%E6%9E%90/</a></span></div><div class="post-copyright-m"><div class="post-copyright-m-info"><div class="post-copyright-a"><h>作者</h><div class="post-copyright-cc-info"><h>北城韩雨</h></div></div><div class="post-copyright-c"><h>发布于</h><div class="post-copyright-cc-info"><h>2019-03-31</h></div></div><div class="post-copyright-u"><h>更新于</h><div class="post-copyright-cc-info"><h>2019-06-03</h></div></div><div class="post-copyright-c"><h>许可协议</h><div class="post-copyright-cc-info"><a class="icon" rel="noopener" target="_blank" title="Creative Commons" href="https://creativecommons.org/"><i class="fab fa-creative-commons"></i></a><a rel="noopener" target="_blank" title="CC BY-NC-SA 4.0" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div></div></div></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/jQuery/">jQuery</a></div><div class="post_share"></div></div><link rel="stylesheet" href="/" media="defer" onload="this.media='all'"/><div class="post-reward"><button class="tip-button reward-button"><span class="tip-button__text">打赏</span><div class="coin-wrapper"><div class="coin"><div class="coin__middle"></div><div class="coin__back"></div><div class="coin__front"></div></div></div><div class="reward-main"><ul class="reward-all"><li class="reward-item"><a href="/img/weixin.jpg" target="_blank"><img class="post-qr-code-img" src="/img/weixin.jpg" alt="微信"/></a><div class="post-qr-code-desc">微信</div></li><li class="reward-item"><a href="/img/taobao.jpg" target="_blank"><img class="post-qr-code-img" src="/img/taobao.jpg" alt="支付宝"/></a><div class="post-qr-code-desc">支付宝</div></li></ul></div></button></div><script defer="defer" src="/"></script><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2020/03/22/egg/"><img class="prev-cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">EggJs</div></div></a></div><div class="next-post pull-right"><a href="/2019/03/31/%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E5%87%BD%E6%95%B0/"><img class="next-cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-12-05%2F66b696ea615f3567a32b65f93611a814%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530687&amp;t=c2e3c97de6dbdc29e77593d5f4dc7fb5" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">数据类型函数</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2020/03/28/放大镜/" title="实现京东放大镜效果"><img class="cover" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&refer=http%3A%2F%2Fpic.vjshi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629530659&t=bbcfe1e86f393eecbb0722db1b92e475" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-03-28</div><div class="title">实现京东放大镜效果</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/img/my.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">北城韩雨</div><div class="author-info__description">一个前端界的小学生</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">65</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">23</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">21</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/wazer1987"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="/wangzhengvslike@163.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content"><p>感谢访问本站，如喜欢请收藏。本站主要分享前端知识，立志成为资深前端工程师，但目前是一个前端界的小学生 若喜欢可以打赏请博主喝一杯冰阔落</p> <p>另外请大家多多支持淼哥的开源项目</p> <p>https://github.com/flipped-aurora/gin-vue-admin</p> <p>🌟🌟欢迎大家start 🌟🌟</p> <p>欢迎加入博主的前端技术交流群</p> <p style="background:rgba(255,255,255,1);margin:0"> <img src="/img/code.png"></img> </p></div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#jQuery-%E8%A7%A3%E6%9E%90"><span class="toc-text">jQuery 解析</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#jQuery-%E5%B8%B8%E7%94%A8%E6%96%B9%E6%B3%95"><span class="toc-text">jQuery 常用方法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JQ%E7%A7%8D%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%B5%8B"><span class="toc-text">JQ种的数据类型检测</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A3%80%E6%B5%8B%E6%98%AF%E5%90%A6%E4%B8%BA%E6%95%B0%E7%BB%84%E6%88%96%E8%80%85%E7%B1%BB%E6%95%B0%E7%BB%84"><span class="toc-text">检测是否为数组或者类数组</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A3%80%E6%B5%8B%E6%98%AF%E5%90%A6%E4%B8%BA%E7%A9%BA%E5%AF%B9%E8%B1%A1"><span class="toc-text">检测是否为空对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%A3%80%E6%B5%8B%E6%98%AF%E5%90%A6%E4%B8%BA%E7%BA%AF%E7%B2%B9%E7%9A%84%E5%AF%B9%E8%B1%A1"><span class="toc-text">检测是否为纯粹的对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#jquery%E6%A0%B8%E5%BF%83"><span class="toc-text">jquery核心</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%8C%82%E8%BD%BD%E5%88%B0window%E7%9A%84%E8%BF%87%E7%A8%8B"><span class="toc-text">挂载到window的过程</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8E%9F%E5%9E%8B"><span class="toc-text">原型</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-text">选择器</span></a></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin"><img src="/img/gin-vue-admin.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Gin-Vue-Admin"/></a><div class="content"><a class="title" href="/2021/04/16/gin-vue-admin/" title="Gin-Vue-Admin">Gin-Vue-Admin</a><time datetime="2021-04-15T16:00:00.000Z" title="发表于 2021-04-16 00:00:00">2021-04-16</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件的渲染10"/></a><div class="content"><a class="title" href="/2021/01/08/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E6%B8%B2%E6%9F%9310/" title="Vue源码开发-组件的渲染10">Vue源码开发-组件的渲染10</a><time datetime="2021-01-07T16:00:00.000Z" title="发表于 2021-01-08 00:00:00">2021-01-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com%2F20191017%2F4cfc341591d242327b67e9ceb6953612_00002.jpg&amp;refer=http%3A%2F%2Fcz-video-photo.oss-cn-beijing.aliyuncs.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530702&amp;t=80943e12d5239f63beafd6d1c540855f" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-组件合并策略09"/></a><div class="content"><a class="title" href="/2021/01/07/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%BB%84%E4%BB%B6%E7%9A%84%E5%90%88%E5%B9%B6%E7%AD%96%E7%95%A509/" title="Vue源码开发-组件合并策略09">Vue源码开发-组件合并策略09</a><time datetime="2021-01-06T16:00:00.000Z" title="发表于 2021-01-07 00:00:00">2021-01-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2F3eca5394963b50e37b7be2ba320029ec%2F00003.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530644&amp;t=10679b5732c52e39eeb588040240a790" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-数组的依赖收集08"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E6%95%B0%E7%BB%84%E7%9A%84%E4%BE%9D%E8%B5%96%E6%94%B6%E9%9B%8608/" title="Vue源码开发-数组的依赖收集08">Vue源码开发-数组的依赖收集08</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.vjshi.com%2F2018-07-17%2Faf41dabad727ba80c9ca8a2bfbd22a58%2F00004.jpg%3Fx-oss-process%3Dstyle%2Fwatermark&amp;refer=http%3A%2F%2Fpic.vjshi.com&amp;app=2002&amp;size=f9999,10000&amp;q=a80&amp;n=0&amp;g=0n&amp;fmt=jpeg?sec=1629530659&amp;t=bbcfe1e86f393eecbb0722db1b92e475" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vue源码开发-生命周期合并07"/></a><div class="content"><a class="title" href="/2021/01/06/Vue%E6%BA%90%E7%A0%81%E5%BC%80%E5%8F%91%E4%B9%8B%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%90%88%E5%B9%B607/" title="Vue源码开发-生命周期合并07">Vue源码开发-生命周期合并07</a><time datetime="2021-01-05T16:00:00.000Z" title="发表于 2021-01-06 00:00:00">2021-01-06</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright"><span>&copy;2017 - 2021</span><svg style="width:2em; height:2em;position: relative;top: 10px;" aria-hidden="true"><use xlink:href="#icon-Butterfly"></use></svg><span>北城韩雨</span></div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><p><a style="margin-inline:5px" target="_blank" href="https://hexo.io/"><img src="https://img.shields.io/badge/Frame-Hexo-blue?style=flat&logo=hexo" title="博客框架为Hexo"></a><a style="margin-inline:5px" target="_blank" href="https://butterfly.js.org/"><img src="https://img.shields.io/badge/Theme-Butterfly-6513df?style=flat&logo=bitdefender" title="主题采用butterfly"></a><a style="margin-inline:5px" target="_blank" href="https://www.jsdelivr.com/"><img src="https://img.shields.io/badge/CDN-jsDelivr-orange?style=flat&logo=jsDelivr" title="本站使用JsDelivr为静态资源提供CDN加速"></a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/medium-zoom/dist/medium-zoom.min.js"></script><div class="js-pjax"></div><script defer src="/live2d-widget/autoload.js"></script><script src="/js/coin.js"></script><script async src="//at.alicdn.com/t/font_2700632_3rtvhzzpl3h.js"></script><script src="/js/liuxing.js" data-pjax></script><canvas class="fireworks" mobile="false"></canvas><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = false;
document.body.addEventListener('input', POWERMODE);
</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div><!-- hexo injector body_end start --><div class="js-pjax"><script async="async">var arr = document.getElementsByClassName('recent-post-item');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '1s');
    arr[i].setAttribute('data-wow-delay', '0ms');
    arr[i].setAttribute('data-wow-offset', '100');
    arr[i].setAttribute('data-wow-iteration', '1');
  }</script><script async="async">var arr = document.getElementsByClassName('card-widget');
for(var i = 0;i<arr.length;i++){
    arr[i].classList.add('wow');
    arr[i].classList.add('animate__zoomIn');
    arr[i].setAttribute('data-wow-duration', '');
    arr[i].setAttribute('data-wow-delay', '');
    arr[i].setAttribute('data-wow-offset', '');
    arr[i].setAttribute('data-wow-iteration', '');
  }</script></div><script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/wow_init.min.js"></script><script async src="//at.alicdn.com/t/font_2032782_8d5kxvn09md.js"></script><!-- hexo injector body_end end --></body></html>